<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>欢迎</title>
    <link rel="stylesheet" href="./css/desk.css">
    <!-- 引入字体 -->
    <link rel="stylesheet" href="./css/fontsize.css">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3329812_875cpifco4l.css">
    <!-- 引入 scrollreveal -->
    <script src="https://unpkg.com/scrollreveal"></script>
    <script src="./js/desk.js"></script>
    <link rel="stylesheet" type="text/css" href="http://zhouql.vip/cdn/css/szgotop.css" />
</head>

<body>
    <div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="http://zhouql.vip/cdn/szgotop.js"></script>
    <div class="center">
        <!-- 右边导航栏功能 -->
        <div class="nav">
            <a href="#" class="active"><i class="iconfont icon-sousuo"></i>搜索</a>
            <a href="library.html" class="active" th:href="@{/library}"><i class="iconfont icon-shezhi"></i>藏书阁</a>
            <a href="libraryCard.html" class="activey active" th:href="@{/libraryCard}"><i class="iconfont icon-guanyu"></i>借书证</a>
        </div>
        <div class="novel">
            <p class="novles">
                所有灿烂的时刻，最终都要用孤独来偿还。<br>
                &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                &nbsp;&nbsp; &nbsp;&nbsp; ——《百年孤独》
            </p>
        </div>
        <!-- 下滑箭头 -->
        <a href="#capital" class="xiahua"><i class="iconfont icon-jiantou_yemian_xiangxia_o"></i></a>

    </div>
    <!-- 真正的主页面 -->
    <div class="capital" id="capital">
        <div class="big-left">
            <!-- 左边用户 -->
            <div class="capital-people">
                <img src="./imgs/imgs3.jpeg" alt="">
                <p class="peole" th:text="${session.User.userName}">nike</p>
                <input type="button" value="修改" class="reset">
                <input type="button" value="退出登录" class="btn" th:href="@{/login}">
                <div class="logs">
                    <a href="#" class="log"><i class="iconfont icon-shejiaotubiao-39"></i></a>
                    <a href="#" class="log"><i class="iconfont icon-weixin"></i></a>
                    <a href="#" class="log"><i class="iconfont icon-github-fill" con-github-fill></i></a>
                </div>
            </div>

            <!--            还书提醒-->
            <div class="big-tip">
                <div class="outTip">
<!--                    <p>你已经逾期不还书啦！赶紧还书吧！</p>-->
<!--                    <button class="certain">确定</button>-->
                </div>
            </div>

            <!-- 借书遮盖层 -->
            <div class="container4">
                <!-- 弹出框 -->
                <div class="container4-content4">
                    <div class="content4-detail">
                        <p>确定退出登录吗？</p>
                    </div>
                    <!-- value：后台保存的值 -->
                    <button class="decoration decide" th:href="@{/login}">确定</button>
                    <button class="decoration vanish">取消</button>
                </div>
            </div>

            <!-- 提示公告 -->
            <div class="advice">
                <p>
                    <i class="iconfont icon-laba"></i>
                    尊敬的读者:<br>每次最多能借8本书,借书期限最长为30天
                </p>
            </div>

            <!-- 推荐的书籍 -->
            <div class="newbook">
                <p class="topic">最新书籍</p>
                <div class="types">
                    <a href="#" class="new-book1">数学</a>
                    <a href="#" class="new-book1 books2">计算机</a>
                    <a href="#" class="new-book1 books3">自然科学</a>
                    <a href="#" class="new-book1 books4">天文学</a>
                    <a href="#" class="new-book1 books5">哲学</a>
                    <a href="#" class="new-book1 books6">工业技术</a>
                </div>
            </div>
        </div>

        <!-- 遮盖层 -->
        <div class="container">
            <!-- 弹出框 -->
            <div class="container-content">
                <div class="content-title">
                    <p>用户修改</p>
                </div>
                <div class="content-detail">
                    <!-- <p>确定要借这本书吗?</p> -->
                    <form action="#" method="post" class="content-detail" th:action="@{/update}">
                        <div class="form-name" style="display: none">
                            <label class="displayid">用户名id:</label>
                            <input type="text" class="form-control displayid" th:value="${session.User.userId}" name="id">
                        </div>
                        <div class="form-name">
                            <label>用户名:</label>
                            <input type="text" class="form-control" th:value="${session.User.userName}" name="userName">
                        </div>
                        <div class="form-name">
                            <label>密码:</label>
                            <input type="text" class="form-control" th:value="${session.User.password}" name="password">
                        </div>
                        <div class="form-name">
                            <label>公司:</label>
                            <input type="text" class="form-control" th:value="${session.User.company}" name="company">
                        </div>
                        <div class="form-name">
                            <label>职位:</label>
                            <input type="text" class="form-control" th:value="${session.User.job}" name="job">
                        </div>

                        <input  type="submit" class="decoration determine" value="确定">
                        <input class="decoration canle" value="取消">
                    </form>


                </div>

            </div>
        </div>

        <!-- 修改成功遮盖层 -->
        <div class="container1">
            <!-- 弹出框 -->
            <div class="container1-content1">
                <div class="content1-detail">
                    <p><i class="iconfont icon-chenggong"></i>修改成功!</p>
                </div>
            </div>
        </div>
        <!-- 修改失败 -->
        <div class="container2">
            <div class="container2-content2">
                <div class="content2-detail">
                    <p><i class="iconfont icon-shibai"></i>修改失败!</p>
                </div>
            </div>
        </div>

        <!-- 右-功能 -->
        <div class="captical-funtion">
            <div class="function1">
                <div class="imgs1">
                    <img src="./imgs/imgs8.jpeg" alt="" class="photo1">
                </div>
                <div class="function1-content">
                    <a th:href="@{/library}" class="function-novel">藏书阁</a>
                    <!-- <p class="function-complain">书籍浩如烟海，知识无穷无尽</p> -->
                </div>

            </div>
            <div class="function2">
                <div class="imgs2">
                    <img src="./imgs/imgs9.jpg" alt="" class="photo1">
                </div>
                <div class="function2-content">
                    <a href="libraryCard.html" class="function-novel2" th:href="@{/libraryCard}">借书证</a>
                </div>
            </div>

        </div>
    </div>
</body>

</html>